@use "variables" as *;
@use "mixins" as *;
@use "sass:color";

.BksUiKit {
  // Global
  // ------------------------------------
  a {
    display: inline-block;
    align-items: center;
    color: $link-color;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    &:hover, &:focus {
      color: $link-color;
      text-decoration: none;
    }
    &.disabled, &.disabled:hover {
      cursor: initial;
      opacity: 0.25;
    }
  }
  i {
    @include noselect;
  }
  .expand {
    flex-grow: 1;
  }
  .truncate {
    @include truncate;
  }
  .sub {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 80%;
    letter-spacing: 0.05rem;
  }
  .noselect {
    @include noselect;
  }
  .clickable,
  .cursor-pointer {
    cursor: pointer;
  }
  hr {
    border: 0;
    border-bottom: 1px solid $border-color;
  }

  // Material-icons
  .material-icons {
    font-size: 18px;
  }

  // Selection
  ::selection {
    background: $theme-secondary;
  }

  // Placeholder
  ::placeholder {
    color: $text-hint;
  }

  // Scrollbar
  // ---------------------
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  ::-webkit-scrollbar-track-piece {
    background-color: transparent;
    background-image: url(); background-repeat: repeat-y;
  }
  ::-webkit-scrollbar-thumb {
    background: mix($theme-base, $theme-bg, 20%);
    border-radius: 2px;
  }
  ::-webkit-scrollbar-button {
    display: none;
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }


  // Buttons
  // ---------------------------------------

  .a-icon {
    display: flex;
    text-decoration: none;
    align-items: center;
  }
  .btn {
    @include btn;
  }
  .btn-primary {
    background: $theme-base;
    color: rgba($theme-bg, 0.87);
    transition: background 0.15s ease-in-out;
    &:hover, &:focus {
      background: rgba($theme-base, 0.87);
      color: $theme-bg;
    }
  }

  .btn-brand {
    color: #181818;
    background: $theme-primary;
    &:hover, &:focus {
      background: $theme-primary;
      color: #000;
    }
  }

  .btn-flat {
    @include btn-flat;
  }
  .btn-link {
    color: $theme-base;
    background: transparent;
    box-shadow: none;
    &:hover, &:focus {
      background: rgba($theme-base, 0.06);
    }
  }
  .btn-icon {
    .material-icons:first-child {
      margin-right: $gutter-h * 0.65;
      margin-left: 0;
    }

    .material-icons:last-child {
      margin-left: $gutter-h * 0.65;
    }
  }
  .btn-info {
    background: $brand-info;
    color: rgba(black, 0.87);
    &:hover, &:focus {
      background: color.adjust($brand-info, $lightness: 8%);
      color: rgba(black, 0.87);
    }
  }
  .btn-danger {
    &:hover {
      background: $brand-danger;
      color: white;
    }
  }
  .btn-large {
    padding: 1.25em;
    font-size: 13px;
    width: 100%;
    max-width: 250px;
  }
  .btn-small {
    @include btn-small;
  }
  .btn-block {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .btn-fab {
    $fab-size:   26px;

    height: $fab-size;
    min-width: $fab-size;
    width: $fab-size;
    height: $fab-size;
    line-height: $fab-size;
    border-radius: $fab-size;
    padding: 0;
    margin: 0;
    text-align: center;
    box-shadow: none;
    @include noselect;
    @include layout-center;
    transition: background 0.15s ease-in-out;
    &:hover, &:focus {
      background: rgba($theme-base, 0.1);
    }
    .material-icons, .material-icons-outlined {
      font-size: 20px;
      color: $text-dark;
    }
    &.btn-primary {
      background: $theme-primary;
      .material-icons {
        color: rgba(black, 0.87);
      }
      &:hover, &:focus {
        background: color.adjust($theme-primary, $lightness: -8%);
        .material-icons {
          color: rgba(black, 0.87);
        }
      }
    }
  }
  .btn-group {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    >.btn {
      margin-left: 0.25rem;
      margin-right: 0.25rem;
    }
  }

  // Disabled Buttons
  .btn[disabled="disabled"] {
    $btn-disabled-opacity:      0.25;

    opacity: $btn-disabled-opacity;
    &:hover, &:focus {
      opacity: $btn-disabled-opacity;
    }
    &.btn-primary {
      &:hover, &:focus {
        background: $theme-base;
      }
    }
    &.btn-flat {
      &:hover, &:focus {
       background: transparent;
      }
    }
  }

  // Inputs
  // -----------------------
  .row.gutter > .form-group {
    margin-top: 0;
    margin-bottom: 0;
  }
  .form-group {
    display: flex;
    flex-direction: column;
    padding-top: $gutter-h;
    margin-bottom: $gutter-h * 0.5;
    &.inline {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      > * {
        display: inline-block;
        padding-bottom: $gutter-h;
      }
      label {
        padding-right: $gutter-w * 2;
        text-align: right;
      }
      &.input {
        label {
          line-height: $input-height;
          vertical-align: top;
        }
        textarea {
          height: auto;
        }
      }
    }
    input {
      &[disabled="disabled"], &[disabled="disabled"]:hover, &[disabled="disabled"]:focus {
        color: $text-lighter;
        cursor: not-allowed;
        border-style: dotted;
      }
    }
    label {
      display: flex;
      align-items: center;
      font-size: 0.85rem;
      line-height: 1.5;
      padding: 0 ($gutter-h * 0.5);
      margin-bottom: 2px;
      .hint {
        margin: 0 0 0 0.25rem;
      }
    }
    .hint {
      margin: $gutter-h * 0.5;
      margin-bottom: 0;
      font-size: 80%;
      color: $text-hint;
    }
  }
  .form-control {
    @include form-control;
  }

  label {
    i {
      margin: 0 ($gutter-h * 0.75);
      font-size: 18px;
      color: rgba($theme-base, 0.37);
    }
  }

  input, select, textarea, .bk-form-input {
    @include form-control;
    &:focus {
      border-color: $input-highlight;
    }
  }
  .input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;

    > .form-control {
      position: relative;
      flex: 1 1 0%;
      min-width: 0;
      margin-bottom: 0;

      &:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    .input-group-append {
      margin-left: -1px;
      display: flex;

      > .btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      &.not-last > .btn {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

  // Select
  // --------------------------------
  select {
    -webkit-appearance: none;
    appearance: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='rgba(255,255,255, 0.87)'><polygon points='0,0 8,0 4,4'/></svg>") no-repeat scroll 98% 60% transparent ;
    padding: 0 0.75rem;
    option {
      background: color.adjust($theme-bg, $lightness: 3%);
      color: $text;
      &:checked,
      &:hover {
        color: white;
        box-shadow: 0 0 10px 100px $brand-info inset;
      }
      &:disabled, &:disabled:hover, &:disabled:focus {
        background: transparent;
        color: $text-lighter;
      }
    }
  }
  .select-wrap {
    position: relative;
    padding-right: $gutter-h;
    border-radius: $input-radius;
    overflow: hidden;
    width: 100%;
    box-shadow: inset 0 0 0 1px $border-color;
    transition: background 0.15s ease-in-out;
    &:hover {
      background: rgba($theme-base, 0.05);
    }
    > select {
      border: 0;
      padding-right: 1.25rem;
      cursor: pointer;
    }
  }

  // Checkbox
  // -------------------------------
  .checkbox-group {
    display: inline-flex;
    align-items: center;
    padding: ($gutter-h * 0.5);
    cursor: pointer;
    span {
      font-size: 13px;
    }
    .has-tooltip {
      color: $text-lighter;
    }
  }
  input[type="checkbox"] {
    $checkbox-size:     18px;

    position: relative;
    display: inline-flex;
    -webkit-appearance: none;
    background-color: transparent;
    outline: 2px solid rgba($theme-base, 0.2);
    outline-offset: -2px;
    height: $checkbox-size;
    line-height: $checkbox-size;
    width: $checkbox-size;
    padding: 0;
    border: 0;
    margin-top: -1px;
    margin-right: ($gutter-w * 0.8);
    border-radius: 5px;
    transition: background 0.2s ease-in-out;
    cursor: pointer;
    &:active,
    &:checked,
    &:checked:active {
      background: $theme-base;
      color: $theme-bg;
      box-shadow: none;
      outline: none;
    }
    &:checked:after {
      font-family: 'Material Icons';
      content: '\e5ca';
      font-size: $checkbox-size;
      font-weight: bold;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      color: $theme-bg;
    }
  }

  // Radio
  // ---------------------------------
  input[type="radio"] {
    $radio-size:     16px;

    position: relative;
    display: inline-flex;
    -webkit-appearance: none;
    background-color: transparent;
    box-shadow: inset 0 0 0 2px rgba($theme-base, 0.2);
    height: $radio-size;
    line-height: 1;
    width: $radio-size;
    padding: 0;
    border: 0;
    margin-top: -1px;
    margin-right: $gutter-h;
    border-radius: 5px;
    transition: background 0.2s ease-in-out;
    cursor: pointer;
    &:checked{
      background: color.adjust($theme-primary, $lightness: -10%);
      color: rgba(black, 0.87);
      box-shadow: none;
    }
  }

  // Input File
  // ---------------------------------
  input[type=file] {
    padding-left: $gutter-h;
    font-size: 12px;
    outline: none;
    border: 0;
    box-shadow: inset 0 0 0 1px $border-color;
    &::-webkit-file-upload-button {
      font-family: $font-family;
      color: $theme-base;
      background: rgba($theme-base, 0.035);
      font-size: 11px;
      line-height: $input-height;
      height: $input-height + 1px;
      padding: 0 $gutter-w;
      font-weight: bold;
      padding: 0 $gutter-w;
      margin-left: -$gutter-h;
      border: 0;
      outline: none;
      box-shadow: inset -1px 0 rgba($theme-base, 0.08);
      transition: background 0.15s ease-in-out;
      cursor: pointer;
      &:hover, &:focus {
        background: rgba($theme-base, 0.08);
      }
    }
  }

  .text-primary {
    color: $brand-primary;
  }

  .text-success {
    color: $brand-success;
  }
  .text-info {
    color: $brand-info;
  }
  .text-danger {
    color: color.adjust($brand-danger, $lightness: 5%);
  }
  .text-warning {
    color: $brand-warning;
  }
  .text-light {
    color: $text-light;
  }
  .text-lighter {
    color: $text-lighter;
  }

  .text-2x {
    font-size: 2rem;
    &.material-icons {
      font-size: 2em;
    }
  }

  .text-center {
    text-align: center;
  }

  // Nav
  // ----------------------------------
  .nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }
  .nav-tabs {
    border: 0;
    .nav-link {
      border: 0;
      &.active {
        border: 0;
        background: $query-editor-bg;
      }
    }
  }
  .nav-link {
    display: block;
    padding: 0.5rem 1rem;
  }
  .item-icon {
    font-size: 12px;
    color: color.adjust($theme-primary, $lightness: -15%);
    &.schema-icon {
      color: $text-lighter;
    }
    &.view-icon {
      color: $brand-secondary;
    }
    &.routine-icon {
      color: $brand-success;
      &.routine-window-icon {
        color: $brand-pink;
      }
      &.routine-function-icon {
        color: $brand-success;
      }
      &.routine-aggregate-icon {
        color: $brand-warning;
      }
      &.routine-procedure-icon {
        color: $brand-secondary;
      }
    }
    &.materialized-view-icon {
      color: $brand-success;
    }
    &.query {
      color: $brand-pink;
    }
    &.database {
      color: $brand-purple;
    }
    &.connection {
      color: $brand-secondary;
    }
    &.settings {
      color: $text-lighter;
    }
    &.table-builder {
      color: $brand-info;
    }
    &.table-builder-icon {
      color: $brand-info;
    }
  }

  // Split.js Resizer
  // ------------------------------------------
  .gutter {
    position: relative;
    &.gutter-horizontal,
    &.gutter-vertical {
      display: flex;
      background-color: transparent;
      z-index: 20;
    }
    &.gutter-horizontal {
      width: 0;
      cursor: ew-resize;
      &:after {
        height: 100%;
        width: var(--gutter-size, 10px);
        transform: translateX(-50%);
        background-color: inherit;
      }
    }
    &.gutter-vertical {
      cursor: ns-resize;
      height: 0;
      &:after {
        height: 8px;
        width: 100%;
        top: -4px;
      }
    }
    &:after {
      content: "";
      display: block;
      position: absolute;
      z-index: 10;
    }
  }


  // Cards
  // ---------------------------------------
  .card, .card-flat {
    border-radius: 8px;
    overflow: hidden;
    &.padding {
      padding: 1.5rem;
    }
  }
  .card-body {
    &.padding {
      padding: 1.25rem;
    }
  }
  .card-actions {
    display: flex;
    padding: 0.5rem;
    justify-content: flex-end;
  }
  .card {
    background: color.adjust($theme-bg, $lightness: 6%);
    @include card-shadow;
  }
  .card-flat {
      background: $theme-bg;
      box-shadow: none;
  }
  .card-title {
    color: $text-dark;
    font-size: 1.25rem;
    margin: 0;
    margin-bottom: 1.25rem;
  }
  .card-shadow {
    box-shadow: 0 0 0 1px rgba(black ,0.06),
                0 1px 3px 0 rgba(black ,0.12),
                0 2px 1px -1px rgba(black ,0.08);
    transition: box-shadow 0.28s ease-in-out;
  }
  .card-shadow-hover {
    box-shadow: 0 0 0 1px rgba(black ,0.06),
                0 1px 2px rgba(black ,0.08),
                0 6px 15px rgba(black ,0.12);
  }

  // Badge
  // -------------------
  .badge {
    display: inline-block;
    padding: 0 0.35rem;
    border-radius: 1rem;
    font-size: 90%;
    font-weight: normal;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background: rgba($theme-base, 0.2);
    color: $theme-base;
    margin: 0 ($gutter-h * 0.75);
    transition: color 0.15s ease-in-out,
                background-color 0.15s ease-in-out,
                border-color 0.15s ease-in-out,
                box-shadow 0.15s ease-in-out;
    &.badge-info {
      background: $brand-info;
      color: rgba(black, 0.87);
    }
    &.badge-error, &.badge-danger {
      background: $brand-danger;
      color: rgba(black, 0.87);
    }
    &.badge-success {
      background: $brand-success;
      color: rgba(black, 0.87);
    }
  }

  // Alerts
  // --------------------------

  .inline-alert {
    a {
      color: inherit;
      text-decoration: underline;
      &:hover {
        color: $link-color;
      }

      i.close {
        font-size: inherit;
        vertical-align: middle;
        color: $text;
        &:hover {
          color: $text-dark;
        }
      }
    }
  }

  .alert {
    display: flex;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    background: rgba($theme-base, 0.035);
    margin: 0.5rem 0;
    font-size: 0.85rem;
    line-height: 24px;
    > i {
      font-size: 18px;
      line-height: 24px;
      margin-right: 1rem;
    }
    ul {
      margin: 0.35rem 0;
      padding-left: 1.5rem;
    }
    p {
      margin: 0;
    }
    a:not(.btn) {
      text-decoration: underline;
      color: inherit;
    }
    .alert-body {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      flex-grow: 1;
      line-height: 24px;
    }
    .alert-footer {
      display: flex;
      line-height: 24px;
      height: 26px; // button height
    }
  }
  .alert-danger {
    color: color.adjust($brand-danger, $lightness: 5%);
  }
  .alert-warning {
    color: color.adjust($brand-warning, $lightness: 5%);
  }
  .alert-info {
    color: color.adjust($brand-info, $lightness: 5%);
  }
  .alert-success {
    color: color.adjust($brand-success, $lightness: 5%);
  }

  // Dropdown
  // --------------------------
  .dropdown-search {
    display: block;
    font-size: 100%;
    margin: 0;
    width: 100%;
    border: 0;
    --vs-controls-color: #{$input-highlight};
    --vs-border-color: #{$border-color};

    --vs-dropdown-bg: #{$theme-bg};
    --vs-dropdown-color: #{$text};
    --vs-dropdown-option-color: #{$text};

    --vs-selected-bg: #{$input-highlight};
    --vs-selected-color: #{$text};

    --vs-search-input-color: #{$text};

    --vs-dropdown-option--active-bg: #{$input-highlight};
    --vs-dropdown-option--active-color: #{$theme-base};

    .vs__clear{
      display: none;
    }
    .vs__dropdown-toggle{
      border: unset;
      padding: 0;
      background: unset;
    }
    .vs__selected {
      position: absolute;
      top: 2px;
      display: block;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 100%;
      overflow: hidden;
    }
    .vs__actions {
      padding: 0
    }
    input {
      border: unset;
    }
  }
}
